<template>
    <div class="record-wrapper">
        <div class="container">
            <div class="page-title">
                <div class="title-name">填写邮寄信息<span>（填写此表单确认后，会将发货信息同步给用户）</span></div>
                <span class="close-btn" @click="close">
                    <i class="el-icon-close"></i>
                </span>
            </div>
            <el-scrollbar class="scrollbar">
                <div class="form-container">
                    <el-form class="form" ref="form" :model="form" :rules="rules" size="small" label-width="200px"
                        label-suffix="：">
                        <el-form-item label="产品订单号" prop="orderNum">
                            <el-input v-model="form.orderNum" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="邮寄物品" prop="deliverSth">
                            <el-select class="select" v-model="form.deliverSth" :disabled="currentStatus == 'check'">
                                <el-option v-for="item in deliverOptions" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option></el-select>
                        </el-form-item>
                        <el-form-item label="快递平台" prop="deliverOrderPlatform">
                            <el-input v-model="form.deliverOrderPlatform" :disabled="currentStatus == 'check'"></el-input>
                        </el-form-item>
                        <el-form-item label="快递编号" prop="deliverOrderNum">
                            <el-input v-model="form.deliverOrderNum" @input="handleInput"
                                :disabled="currentStatus == 'check'"></el-input>
                        </el-form-item>
                        <el-form-item label="用户收件手机号" prop="phone">
                            <el-input v-model="form.phone" :disabled="currentStatus == 'check'"></el-input>
                        </el-form-item>
                        <el-form-item label="用户收件地址" prop="address">
                            <el-input v-model="form.address" :disabled="currentStatus == 'check'"></el-input>
                        </el-form-item>
                        <el-form-item label="记录人" prop="recordPerson">
                            <el-input placeholder="请选择记录人" v-model="form.recordPerson" @focus="handleFocusInput"
                                :disabled="currentStatus == 'check'"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </el-scrollbar>
            <div class="operation">
                <el-button class="btn" v-loading="loading" @click="close">取 消</el-button>
                <el-button class="btn" type="primary" v-loading="loading" @click="onSubmit"
                    v-if="currentStatus == 'write'">确 定</el-button>
            </div>
        </div>
        <PersonSelect :visible.sync="personSelectVisible" width="70%" :selectedArr="selectedArr" :component="dataType"
            :multiple="false" @cancel="cancel" @confirm="selectConfirm"></PersonSelect>
    </div>
</template>
  
<script>
import { getAuditerList, saveMailInfo } from "@/api";

export default {
    components: {
        PersonSelect: () => import("@/components/PersonSelect"),
    },
    props: {
        currentStatus: {
            type: String,
            default: "check",
        },
        rcId: {
            type: String,
            default: "",
        },
        orderInfo: {
            type: Object,
            default: "",
        },
        orderNo: {
            type: String,
            default: "",
        }
    },
    data() {
        return {
            loading: false,
            form: {
                orderNum: '',// 产品订单号
                deliverSth: '',// 邮寄物品
                deliverOrderPlatform: '',//快递平台
                deliverOrderNum: '',// 快递编号
                phone: '',// 用户手机号
                address: '',// 用户收件地址
                recordPerson: '',
            },
            rules: {
                orderNum: [
                    { required: true, message: "请填写产品订单号", trigger: "change" },
                ],
                deliverSth: [
                    { required: true, message: "请选择邮寄物品", trigger: "change" },
                ],
                deliverOrderPlatform: [
                    { required: true, message: "请填写快递平台", trigger: "change" },
                ],
                deliverOrderNum: [
                    { required: true, message: "请填写快递编号", trigger: "change" },
                ],
                phone: [
                    { required: true, message: "请填写用户手机手机号", trigger: "change" },
                ],
                address: [
                    { required: true, message: "请填写用户收件地址", trigger: "change" },
                ],
                recordPerson: [
                    { required: true, message: "请选择记录人", trigger: "change" },
                ],
            },
            deliverOptions: [
                { label: "实体职途报告", value: "实体职途报告" },
            ],
            auditerList: [],
            personSelectVisible: false,
            selectedArr: [],
            dataType: "el-dialog",
            currentSelectApplyPersonInfo: {},
            tempoaId: "", // 临时oaId
        };
    },
    created() {
        this.getAuditerListFn();
        console.log('this.orderInfo', this.orderInfo);
        this.form.orderNum = this.orderNo;
        if (this.currentStatus == 'check') {
            // this.form.orderNum = this.orderInfo.rcId;
            this.form.deliverSth = this.orderInfo.mailItem;
            this.form.deliverOrderPlatform = this.orderInfo.deliveryCompany;
            this.form.deliverOrderNum = this.orderInfo.deliveryNo;
            this.form.phone = this.orderInfo.personPhone;
            this.form.address = this.orderInfo.receiveAddress;
            this.form.recordPerson = this.orderInfo.deliveryOperationName || '记录人';
        } else {
            // this.form.deliverSth = this.orderInfo.mailItem;
            // this.form.deliverOrderPlatform = this.orderInfo.deliveryCompany;
            // this.form.deliverOrderNum = this.orderInfo.deliveryNo;
            if (this.orderInfo) {
                this.form.phone = this.orderInfo.personPhone;
                this.form.address = this.orderInfo.receiveAddress;
            }
            // this.form.recordPerson = this.orderInfo.deliveryOperationName || '';
        }

    },
    mounted() {
        this.$refs.form.resetFields();
    },
    methods: {
        async saveMailInfoFn() {
            const params = {
                rcId: this.rcId,
                personPhone: this.form.phone,
                mailItem: this.form.deliverSth,
                deliveryCompany: this.form.deliverOrderPlatform,
                deliveryNo: this.form.deliverOrderNum,
                receiveAddress: this.form.address,
                deliveryOperationId: this.tempoaId,
                deliveryOperationName: this.form.recordPerson,
            }
            const res = await saveMailInfo(params);
            if (res.code == 200) {
                this.$message.success('填写成功');
                console.log('res', res);
            }
        },
        handleInput(value) {
            // 使用正则表达式匹配字母和数字，并将匹配到的结果赋值给inputValue
            this.form.deliverOrderNum = value.replace(/[^a-zA-Z0-9]/g, '');
        },
        close() {
            this.$emit("closeDeliverInfo");
        },
        handleFocusInput() {
            this.personSelectVisible = true;
        },
        getAuditerListFn() {
            getAuditerList().then((res) => {
                if (res.code == 200) {
                    this.auditerList = res.data;
                    if (this.auditerList.length > 0) {
                        const temp = this.auditerList.find(
                            (item) => item.auditAdminId == "228"
                        );
                        temp && (this.form.auditObj = temp);
                    }
                }
            });
        },

        selectConfirm(e) {
            console.log("e", e);
            this.tempoaId = e[0].id;
            this.currentSelectApplyPersonInfo = e[0];
            this.form.recordPerson = e[0].name
        },
        cancel() {
            this.personSelectVisible = false;
        },
        onSubmit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.$confirm("请再次确认申请的事项是否正确", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(() => {
                        // this.updateBackRedeemFn();
                        this.saveMailInfoFn();
                        this.close();
                    });
                } else {
                    console.log("这里点击过再次确定按钮但是失败");
                    return false;
                }
            });
        },
    },
};
</script>
  
<style lang="scss" scoped>
.record-wrapper {
    width: 100%;
    /* height: 80vh; */
    overflow-y: hidden;
    background-color: #fff;

    .container {
        height: 100%;
        background-color: #fff;
        border-radius: 8px 8px 0 0;

        .page-title {
            padding-bottom: 18px;
            border-bottom: 1px solid #f2f2f2;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            span {
                font-size: 22px;
                color: #222;
                font-weight: 600;
            }

            .close-btn {
                cursor: pointer;
            }

            .title-name {
                font-size: 22px;
                color: #222;

                span {
                    font-size: 14px;
                    color: #7052FF;
                }
            }
        }

        .scrollbar {
            /* height: calc(100% - 136px); */
        }

        .form-container {
            margin: 0 auto;
            margin-top: 24px;
            width: 85%;

            .left-num {
                font-size: 14px;
                color: #f44716;
            }

            .form {
                width: 100%;

                .select {
                    width: 100%;
                }

                .spe-select {
                    width: 87%;
                }

                .flex {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    color: $primary_color;
                    font-size: 15px;

                    .icon-container {
                        display: flex;
                        align-items: center;
                        cursor: pointer;

                        .self-icon {
                            font-size: 18px;
                            margin-right: 3px;
                        }
                    }
                }

                .checkbox {
                    ::v-deep .el-form-item__content {
                        display: flex;
                    }
                }

                ::v-deep .el-form-item--small.el-form-item {
                    margin-bottom: 32px;
                }

                ::v-deep .el-tag.el-tag--info {
                    margin-right: 8px;
                    color: #333;
                }
            }

            ::v-deep .el-form-item__label {
                padding: 0 4px 0 0;
                color: #636e95;
            }

            .topics {
                span {
                    margin-left: 10px;
                    color: #7052ff;
                    cursor: pointer;
                }
            }
        }
    }

    .operation {
        padding: 15px 0;
        border-top: 1px solid #f2f2f2;
        display: flex;
        justify-content: center;

        .btn {
            width: 200px;
        }
    }

    .editGoodAt {
        font-size: 22px;
        color: #222;
        font-weight: 600;
        padding: 18px 24px 18px 0;
    }

    .upload-button {
        display: flex;
        flex-direction: column;
        background-color: #ececec;
        border-radius: 9px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }

    .el-icon-picture {
        font-size: 28px;
        color: #8c939d;
        width: 95px;
        height: 75px;
        line-height: 75px;
        text-align: center;
    }

    .avatar {
        width: 95px;
        height: 95px;
        display: block;
    }
}
</style>
  